// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.3 创建裁剪区域
$image.cropper({   // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: ".preview",
});




$("#btnChooseImage").on('click', function () {
  $("#file").click()

})

$("#file").change(function () {

  // 1.获取到选择的图片
  const file = this.files[0]
  //如果获取的选择的图片 file 不存在，那么后续的操作就可以不用执行了
  if (!file) {
    return
  }
  // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
  let newSrc = URL.createObjectURL(file)

  // 3. 更换剪裁区的图片的src属性
  // - 销毁原理的剪裁区
  // - 更换图片
  // - 重新创建剪裁区
  $image.cropper('destroy')
    .attr('src', newSrc)
    .cropper({   // 纵横比
      aspectRatio: 1,
      // 指定预览区域
      preview: ".preview",
    });

})


// $("#btnCreateAvatar").on('click', function () {
//   // 剪裁得到一张图片（canvas图片）
//   let canvas = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
//     width: 100,
//     height: 100
//   });

//   // 把图片转成base64格式
//   // 把canvas图片转成base64格式的字符串
//   let dataURL = canvas.toDataURL('image/png');

//   console.log(encodeURIComponent(dataURL));
//   axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`).then((res) => { console.log(res); })

//   // axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`).then((res) => { console.log(res); })
// })

// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });

  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串

  // axios
  axios
    .post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
    .then((res) => {
      // 提示
      if (res.data.status !== 0) {
        // 失败
        return layer.msg("更新头像失败");
      }

      layer.msg("更新头像成功");
      // 页面中的头像发生变化（更新）
      window.parent.getInfo()
    });
});